<template>
	<div class="UrlStatistics">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 市场数据分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="选择日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.startDate"
						align="left"
						type="daterange"
						placeholder="请选择日期"
						@change='dateChange' 
						:picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="归属：" :label-width="formLabelWidth"  prop="attr">
						<el-select v-model="ruleForm.attr" filterable  placeholder="请选择归属" @change="channelChange">
							<el-option v-for="(val,key) in attrs" :label="val.attrName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="渠道名称：" :label-width="formLabelWidth"  prop="channel">
						<el-select v-model="ruleForm.channel" filterable  placeholder="请选择渠道名称" @change="channelChange">
							<el-option v-for="(val,key) in channels" :label="val.channelName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="代理商：" :label-width="formLabelWidth"  prop="agent">
						<el-select v-model="ruleForm.agent" filterable  placeholder="请选择代理商" @change="agentChange">
							<el-option v-for="(val,key) in agents" :label="val.agentName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="平台：" :label-width="formLabelWidth"  prop="platForm">
						<el-select v-model="ruleForm.platForm" filterable  placeholder="请选择代理商" @change="agentChange">
							<el-option v-for="(val,key) in platForms" :label="val.platFormName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="结算方式：" :label-width="formLabelWidth"  prop="settlWay">
						<el-select v-model="ruleForm.settlWay" filterable  placeholder="请选择结算方式" @change="settlWayChange">
							<el-option v-for="(val,key) in settlWays" :label="val.settlWayName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="广告位置：" :label-width="formLabelWidth"  prop="adPlace">
						<el-select v-model="ruleForm.adPlace" filterable  placeholder="请选择广告位置" @change="settlWayChange">
							<el-option v-for="(val,key) in adPlaces" :label="val.adPlaceName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
		    		<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form>
			</div>
		</div>
		<div class="right_content">
			<div class="UrlStatisticsTable"  style='margin-bottom:40px;'>
				<div class="UrlStatisticsTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						详细数据
						<el-button type="primary" size="mini" class="excel"  @click.stop="excel('1',' 广告日数据（url统计）-详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
					</span>
				</div>
				<div class="buttons">
					<el-button type="primary" :disabled="searchable" @click="tabHdD1(1)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					激活转化 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "1"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="tabHdD1(2)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					新增留存 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "2"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="tabHdD1(3)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					累计付费 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "3"'></i>
					</el-button>
				</div>
				<div class="UrlStatisticsTableBody fadeIn animated">
					<div style="width:100%;overflow:auto" id="aa1">
						<div id="scrollAW">
							<template>
							<el-table
								v-loading="loading"
								element-loading-text="拼命加载中"
								:data="tableData1"
								border
								@sort-change = "sortChage1"
								>
								<el-table-column sortable align="center"
									v-for="(col,key) in tableHead1"
									:prop="col.prop" :label="col.label" :key="col.prop" width="180">
								</el-table-column>
							</el-table>
							</template>
						</div>
					</div>	

					<div class="pages UrlStatisticsPage">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="pageSizes"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./UrlStatistics.styl"></style>
<script src="./UrlStatistics.js"></script>
